<!DOCTYPE HTML>
<html>
<head>
<title >SalesAssist</title>

<!--  Styling Sheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" />
<link rel="stylesheet" href="css/Main_page.css" />
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

<!--  Javascript Libraries -->
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script> 
<script src="js/jquery-1.7.1.js"></script> 
<script src="js/jquery.mobile-1.0.1.js"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>


<script src="js/SalesAssist.js"></script>
<!--Load the Google AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	// Load the Visualization API and the piechart package.
	google.load('visualization', '1', {'packages':['corechart']});
	
</script>
</head>
<body>

<div data-role="page" class="page">
<div data-role="header">
	<table id="tbButton">
		<tr>
			<td align="left" style="width:500px">
				<button type="button" id="back" onClick="GoBack()">Back</button>
			</td>
			<th align="center" style="width:200px;font-size:14pt">Sales Assist</th>
			<td align="right" style="width:430px">
				<button type="button" id="save" onClick="savepage()">Save</button>
			</td>
			
			<td align="right">
				<button type="button" id="logout" onClick="leave()">Log Out</button>
			</td>
		</tr>
	</table>
</div><!-- /header -->
<div id="content" class="content">
<div id="data" id="data" class="main" data-role="content">
<div id="cust_data" class="cust_data">
	<table class="s_main" cellspacing="15">
		<tr>
			<th align="left">Business Name</th>
			<th align="left">Contact</th>
			<th align="left">Phone Number</th>
		</tr>
		<tr class="cust_row" id="cust_row">
			<td>
				<input type="text" id="Business" class="" value="" placeholder="Business"/>
			</td>
			<td >
				<input type="text" id="Contact" class="" value="" placeholder="Contact"/>
			</td>
			<td >
				<input type="text" id="Phone" class="" value="" placeholder="Phone No." />
			</td>		
		</tr>
	</table>
</div>
<p></p>
<fieldset>
	<form id="data_form">
	<table class="t_main" align="center" cellspacing="15">
		<tr class="t_row" id="t_label">
			<th>Credit Card</th>
			<th>Amount per Month</th>
			<th>Transaction per Month</th>
			<th>Fees in %</th>
		</tr>
		<tr class="t_row" id="t_r1">
			<td align="center" bgcolor="#3300FF" class="t_card" id="card1">
				<b>VISA</b>
			</td>
			<td>
				<input type="number" id="amount1" class="validate[required,custom[number],min[0]] d_text  d_change" value="" />
			</td>
			<td>
				<input type="number" id="transactions1" class="validate[required,custom[integer],min[0]] d_text  d_change" value="" />
			</td>
			<td>
				<input type="number" id="fees1" class="validate[required,custom[number],min[0]] d_text  d_change" value="" />
			</td>		
		</tr>
		<tr class="t_row" id="t_r2">
			<td align="center" bgcolor="#FC4814" class="t_card" id="card2">
				<b>MasterCard</b>
			</td>
			<td>
				<input type="number" id="amount2" class="validate[required,custom[number],min[0]] d_text  d_change" value="" />
			</td>
			<td>
				<input type="number" id="transactions2" class="validate[required,custom[integer],min[0]] d_text  d_change" value="" />
			</td>
			<td>
				<input type="number" id="fees2" class="validate[required,custom[number],min[0]] d_text  d_change" value="" />
			</td>		
		</tr>
		<tr class="t_row" id="t_r3">
			<td align="center" bgcolor="#009933" class="t_card" id="card3">
					<b>Discover</b>
			</td>
			<td>
				<input type="number" id="amount3" class="validate[required,custom[number],min[0]] d_text  d_change" value=""/>
			</td>
			<td>
				<input type="number" id="transactions3" class="validate[required,custom[integer],min[0]] d_text  d_change" value="" />
			</td>
			<td>
				<input type="number" id="fees3" class="validate[required,custom[number],min[0]] d_text  d_change" value="" />
			</td>		
		</tr>
		<tr class="t_row" id="t_r4">
			<td align="center" bgcolor="#FF9900" class="t_card" id="card4">
				<b>AMEX</b>
			</td>
			<td>
				<input type="number" id="amount4" class="validate[required,custom[number],min[0]] d_text  d_change"  value=""/>
			</td>
			<td>
				<input type="number" id="transactions4" class="validate[required,custom[integer],min[0]] d_text  d_change" value="" />
			</td>
			<td>
				<input type="number" id="fees4" class="validate[required,custom[number],min[0]] d_text  d_change" value="" />
			</td>		
		</tr>
		<tr class="t_row" id="t_r5" align="center">
			<td align="center" class="bold">
				<div><b>Total : </b></div>
			</td>
			<td align="center" class="bold">
				<div id="total_buss"></div>
			</td>
			<td align="center">
				<div id="total_trans" class="bold"></div>
			</td>
			<td align="center" class="bold">
				<div id="Avg_fees_percent"></div>
			</td>		
		</tr>
		<tr class="t_row" id="t_r6" align="center">
			<td align="center" class="bold">
				<div><b>Average Ticket Size</b></div>
			</td>
			<td align="center" class="bold">
				<div id="Average_Ticket_Size"></div>
			</td>
			<td align="center">
				
			</td>
			<td align="center">
				
			</td>		
		</tr>
	</table>
	</form>
</fieldset>
</div>
<div class="chart" id="chart" data-role="content">
	    
	<div class="chart" id="chart" data-role="content"  style="height: 505px; width: 500px">
	    <div class="p_chart" id="p_chart">
		</div>
	    <div class="h_chart" id="h_chart">
		</div>
	</div>
</div>
</div>
</div>

<script type="text/javascript">
$("#data_form").validationEngine('attach');

	$(".d_change").change(function(){	
		Process();
	});
	
	$(".d_change").keyup(function(){
		Process();
	});
</script>
</body>
</html>